<template>
  <div class="home">
    <!-- 搜索框 -->
    <!-- disabled  不可输入 -->
    <van-search v-model="searchVal" placeholder="请输入搜索关键词" disabled />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in banner" :key="index">
        <img :src="item.image_url" alt="" width="100%">
      </van-swipe-item>
    </van-swipe>
    
    <!-- 图标导航 -->
    <van-grid :column-num="5">
      <van-grid-item v-for="(item,index) in channel" :key="index" :icon="item.icon_url" :text="item.name" />
    </van-grid>

    <!-- 品牌制造商直供 -->
    <div class="pinPaiCreater">
    <h4>品牌制造商直供</h4> 
    <van-row gutter="8">
      <van-col span="12" v-for="(item,index) in brandList" :key="index"  class="P_box">
         <img :src="item.pic_url" alt="" width="100%">
         <div class="P_Message">
            <p>{{item.name}}</p>
            <p>{{"￥ "+item.floor_price.toFixed(2)+" 元"}}</p>
          </div>
        </van-col>
    </van-row>
    </div>

    <!-- 新品发布 -->
    <div class="newFabu">
      <h4>周一周四 · 新品首发</h4>
      <van-row gutter="8">
          <van-col span="12" v-for="item in newGoodsList" :key="item.id">
              <img :src="item.list_pic_url" alt="" width="100%">
              <div class="newGood_Message">
                  <p>{{item.name}}</p>
                  <p>{{"￥ "+item.retail_price.toFixed(2)+" 元"}}</p>
              </div>
          </van-col>
      </van-row>
    </div>

    <!-- 人气推荐 -->
    <div class="popular">
        <h4>人气推荐</h4>
        <van-row  >
          <van-col span="24" v-for="(item,index) in hotGoodsList" :key="index"  class="pop_Content">
            <img :src="item.list_pic_url" alt="" width="100px" height="100px">
            <div class="Pop_Message">
              <h2>{{item.name}}</h2>
              <h3>{{item.goods_brief}}</h3>
              <p>{{"￥ "+item.retail_price.toFixed(2)+" 元"}}</p>
            </div>
          </van-col>
      </van-row>
    </div>

    <!-- 专题精选 -->
    <div class="topicList">
      <h4>专题精选</h4>
      <van-swipe :loop="false" :width="300"  >
        <van-swipe-item v-for="item in topicList" :key="item.id" class="top_Box">
          <img :src="item.item_pic_url" alt="" width="100%" height="200px">
          <div class="top_Content">
              <p>{{item.title}} <span>{{" ￥ "+item.price_info.toFixed(2)}}</span> </p>
              <p>{{item.subtitle}}</p>
          </div>
        </van-swipe-item>
    </van-swipe>
    </div>
    


    
  
    
  </div>
</template>

<script>
import axios from "@/request/request"

export default {
  name: "Home",
  data() {
    return {
      searchVal: "",
      banner:[],
      channel: [],
      brandList:[],
      newGoodsList:[],
      hotGoodsList:[],
      topicList:[]
    };
  },
  created(){
    axios
    .get('/index/index')
    .then(res=>{
        let {banner,channel,brandList,newGoodsList,hotGoodsList,topicList} = res.data
        this.banner=banner;
        this.channel=channel;
        this.brandList=brandList;
        this.newGoodsList=newGoodsList;
        this.hotGoodsList=hotGoodsList;
        this.topicList=topicList;
        console.log(this.topicList);
    })
  },
  components: {},
};
</script>

<style lang="less">
    //品牌制造商直供开始
    .pinPaiCreater{
      margin-top: 20px;
      background-color: #fff;
      h4{
        text-align: center;
        font-size: 1.2rem;
        color: #333;
        height: 50px;
        line-height: 50px;
      }
      .P_box{
      position: relative;
    }
    .P_Message{
      position: absolute;
      top: 10px;
      left: 10px;
      p:nth-of-type(2){
        color:#8b0000 ;
        margin-top: 15px;
      }
    }
    }
    //品牌制造商直供结束

    //新品发布开始
    .newFabu{
      margin-top: 20px;
      background-color: #fff;
      padding-bottom: 30px;
      h4{
        text-align: center;
        font-size: 1.2rem;
        color: #333;
        height: 50px;
        line-height: 50px;
      }
      .newGood_Message{
        text-align: center;
        p:nth-of-type(2){
            color:#8b0000 ;
            margin-top: 5px;
          }
      }
    }
    //新品发布结束

    //人气推荐开始
    .popular{
      margin-top: 10px;
      background-color: #fff;
      h4{
        text-align: center;
        font-size: 1.2rem;
        color: #333;
        height: 50px;
        line-height: 50px;
      }
      .pop_Content{
        display: flex;
        background-color: #fafafa;
        margin-top: 10px;
        img{
          padding-left: 10px;
        }
        h2{
          font-size: 1.2rem;
          padding: 15px;
        }
        h3{
          padding: 0 15px 15px; 
        }
        p{
          color:#8b0000 ;
          padding-left:15px ;
        }
      }
    }
    //人气推荐结束

    //专题精选开始
    .topicList{
      margin-top: 20px;
      background-color: #fff;
      h4{
        text-align: center;
        font-size: 1.2rem;
        color: #333;
        height: 50px;
        line-height: 50px;
      }
      .top_Box{
        margin:0 8px 10px;
      }
      .top_Content{
         width: 250px;
        p:nth-of-type(1){
          margin: 10px 0;
          font-size: 1.0rem;
          span{
            color:#8b0000 ;
          }
          // font-weight: 700;
        }
         p:nth-of-type(2){
           white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
           font-size: .9rem;
           margin-top: 5px;
           
         }
      }
    }
    //专题精选结束

  
</style>
